<template>
  <div class="navbar">
      <div class="logo">
          <img src="@/assets/img/logo.jpg" alt="">
      </div>
      <div class="center">
        <p>
            请输入内容
            <van-icon class="ipt-icon" name="search" />
        </p>
      </div>
      <div class="right">
          <img :src="imgurl" @click="$router.push('/userinfo')"/>
          <p>下载App</p>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgurl:''
    }
  },
  async mounted () {
    const res =  await this.$http.get('/user/' + localStorage.getItem('id'))
    this.imgurl = res.data[0].user_img
  }

}
</script>

<style lang="stylus" scoped>
  .navbar
    height 12.5vw
    background-color white
    display flex
    .logo
      width 27.7778vw
      display flex
      justify-content center
      align-items center
      img 
        width 70%
    .right
      display flex
      justify-content center
      align-items center
      img 
        width 6.6667vw
        height 6.6667vw
      p
        padding 0 2.7778vw
        background-color #0daaf1
        color white
        font-size 3.6111vw
        padding 1.3889vw 2.7778vw
        margin 0 1.3889vw
        border-radius 0.5556vw

    .center
      flex 1
      display flex
      align-items center
      margin 0 1.3889vw
      p
        background-color #f4f4f4
        padding-left 8.3333vw 
        height 7.2222vw
        font-size 3.3333vw
        line-height 7.2222vw
        width 100%
        border-radius 3.6111vw
        position relative
        color #aaa
        .ipt-icon
          position absolute
          left 2.7778vw
          top 50%
          transform translate(0,-40%)
          color #aaa
</style>